<!--
 * @Author: your name
 * @Date: 2021-12-17 16:49:29
 * @LastEditTime: 2021-12-18 11:03:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day9\app\src\views\List.vue
-->
/<template>
  <div>
    <a-button type="primary" @click="showModal">新增</a-button>
    <a-table :columns="columns" :data-source="data">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <smile-outlined />
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <!-- <a>Action 一 {{ record.firstName }}</a> -->
            <a @click="editList(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="delList(record.id)">删除</a>
          </span>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:visible="visible"
      title="Basic Modal"
      @ok="handleOk"
      class="mask"
    >
      <p>
        作者:<input
          type="text"
          placeholder="请输入姓名"
          v-model="info.list.bookName"
        />
      </p>
      <p>
        书名:<input
          type="text"
          placeholder="请输入书名"
          v-model="info.list.author"
        />
      </p>
      <p>
        价格:<input
          type="text"
          placeholder="请输入价格"
          v-model="info.list.price"
        />
      </p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { SmileOutlined } from "@ant-design/icons-vue";
import { defineComponent, onMounted, reactive, toRefs, ref } from "vue";
import { getList, redList, addList, editLists } from "../api/axios";

const columns = [
  {
    name: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "作者",
    dataIndex: "author",
    key: "author",
  },
  {
    title: "书名",
    dataIndex: "bookName",
    key: "bookName",
  },
  {
    title: "价格",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "操作",
    key: "action",
  },
];

interface Item {
  id: number;
  bookName: string;
  author: string;
  price: number;
}

export default defineComponent({
  components: {
    SmileOutlined,
  },
  setup() {
    let state = reactive({
      data: [],
    });

    const info = reactive({
      list: {
        bookName: "",
        author: "",
        price: 0,
        id: 0,
      },
    });

    const visible = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    // 删除
    const delList = async (id: number) => {
      // console.log(id)
      let res: any = await redList({ id });
      if (res.status == 200 || res.status == 201) {
        getinit();
      }
    };
    // 编辑
    const editList = (record: Item) => {
      // console.log(record);
      // 回显数据
      info.list = record;
      // 显示弹框
      visible.value = true;
    };
    // 获取数据
    const getinit = async () => {
      let res: any = await getList();
      state.data = res.data;
    };
    // 点击ok
    const handleOk = async (e: MouseEvent) => {
      
      let res: any = info.list.id>0
        ? await editLists(info.list)
        : await addList(info.list);
        console.log(res);
        
      if (res.status == 200 || res.status == 201) {
        getinit();
        info.list = {
          bookName: "",
          author: "",
          price: 0,
          id: 0,
        };
        visible.value = false;
      }
    };

    onMounted(() => {
      getinit();
    });

    return {
      ...toRefs(state),
      columns,
      visible,
      showModal,
      handleOk,
      info,
      delList,
      editList,
    };
  },
});
</script>

<style lang="scss" scoped>
.mask {
  p {
    height: 40px;
    display: flex;
    align-items: center;
    input {
      width: 260px;
      height: 40px;
      border: 1px solid #ccc;
      margin-left: 10px;
    }
  }
}
</style>
